<template>
  <h1>hello vue3</h1>
  <p>
    count: {{ $store.state.counter.count }}, 它是{{
      $store.getters["counter/oddOrEven"]
    }}
  </p>
  <p>count: {{ count }}, 它是{{ oddOrEven }}</p>
  <button @click="handleIncrement">+</button>
  <button @click="handleDecrement">-</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default defineComponent({
  name: "App",
  computed: {
    ...mapState({
      count: (state) => state.counter.count,
    }),
    ...mapGetters("counter", ["oddOrEven"]),
  },
  methods: {
    ...mapActions("counter", ["increment"]),
    ...mapMutations("counter", ["DECREMENT"]),
    handleIncrement() {
      // this.$store.dispatch("counter/increment", 1);
      this.increment(1);
    },
    handleDecrement() {
      // this.$store.commit("counter/DECREMENT", 1);
      this.DECREMENT(1);
    },
  },
});
</script>

<style scoped></style>
